<template>
  <div class="user-basic-container">
    <div class="basic-search">
      <span class="page-title">用户基本信息列表</span>

      <el-input placeholder="请输入搜索内容" v-model="keyWords" class="input-with-select search-keyword">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="ID" value="1"></el-option>
          <el-option label="昵称" value="2"></el-option>
          <el-option label="电话号码" value="3"></el-option>
        </el-select>
      </el-input>
      <el-button type="primary" size="small" icon="el-icon-search" @click="searchUserBasic">搜索</el-button>
      <el-button type="info" size="small" class="search-keyword-reset" plain @click="resetSearch">重置</el-button>
    </div>

    <!--用户基本信息列表-->
    <div class="basic-table">
      <el-table ref="multipleTable" v-loading="listLoading" :data="userBasicData" border stripe fit
                :row-style="{height:'50px'}" :header-row-style="{height:'40px'}"
                :default-sort="{prop: 'time', order: 'descending'}"
                @filter-change="filterChange" @sort-change='sortChange'
      >
        <el-table-column label="ID" width="80">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="昵称" width="240" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.userName }}
          </template>
        </el-table-column>
        <el-table-column label="电话号码" width="120">
          <template slot-scope="scope">
            {{ scope.row.userTel }}
          </template>
        </el-table-column>
        <el-table-column label="用户角色" width="120"
                         :filters="[{ text: '普通员工', value: 0 }, { text: '直营店主', value: 1 }, { text: '加盟店主', value: 2 }
                         , { text: '业务员', value: 3 }, { text: '总驻厂', value: 4 }, { text: '店员', value: 6 }]"
                         :filter-multiple="false" column-key="role"
                         filter-placement="bottom-end" prop="role">
          <template slot-scope="scope">
            {{ scope.row.role | filterRole}}
          </template>
        </el-table-column>
        <el-table-column label="工作状态" width="120"
                         :filters="[{ text: '待业', value:0 },{ text: '在职', value: 1 }, { text: '入职中', value: 2 }]"
                         :filter-multiple="false" column-key="workStatus"
                         filter-placement="bottom-end" prop="workStatus">
          <template slot-scope="scope">
            {{ scope.row.workStatus | filterWorkStatus}}
          </template>
        </el-table-column>
        <!--<el-table-column label="工作类型" width="100">-->
        <!--<template slot-scope="scope">-->
        <!--{{ scope.row.workType | filterWorkType}}-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column label="在职企业" width="240" show-overflow-tooltip>-->
        <!--<template slot-scope="scope">-->
        <!--{{ scope.row.mechanismName }}-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column label="归属人真名" width="100">-->
        <!--<template slot-scope="scope">-->
        <!--{{ scope.row.upUserName }}-->
        <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column label="归属人角色" width="100">-->
        <!--<template slot-scope="scope">-->
        <!--{{ scope.row.userRole | filterRole}}-->
        <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column label="实名状态" width="100">
          <template slot-scope="scope">
            {{ scope.row.isReal | filterReal}}
          </template>
        </el-table-column>
        <el-table-column label="真实姓名" width="110">
          <template slot-scope="scope">
            {{ scope.row.realName}}
          </template>
        </el-table-column>
        <el-table-column label="用户状态" width="100">
          <template slot-scope="scope">
            {{ scope.row.userType==0?'正常':'拉黑'}}
          </template>
        </el-table-column>
        <el-table-column label="生成时间" width="180" sortable prop="time">
          <template slot-scope="scope">
            <span v-if="scope.row.time">{{ scope.row.time | formatTime}}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="150" fixed="right">
          <template slot-scope="{row}">
            <el-dropdown size="mini" :split-button="true" type="primary" @click="handleLook(row)"
                         v-if="checkPermissionPoints(3) == 1">查看
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleEdit(row)" v-if="checkPermissionPoints(4) == 1">编辑
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :type="1" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                  @pagination="getUserBasicList"/>
    </div>

    <!--查看-->
    <el-dialog title="详细信息" :visible.sync="dialogLookVisible" width="960px" class="basic-dialog" top="11vh">
      <el-form label-width="100px" size="mini">
        <el-form-item label="昵称：">
          <span>{{lookUserBasic.userName}}</span>
        </el-form-item>
        <el-form-item label="头像：">
          <img :src="lookUserBasic.userUrl?lookUserBasic.userUrl:require('../../../assets/common_images/avatar.png')"
               class="avatar-pic"/>
        </el-form-item>
        <el-form-item label="性别：">
          <span>{{lookUserBasic.userSex | filterSex}}</span>
        </el-form-item>
        <el-form-item label="电话号码：">
          <span>{{lookUserBasic.userTel}}</span>
        </el-form-item>
        <el-form-item label="用户角色：">
          <span>{{lookUserBasic.role | filterRole}}</span>
        </el-form-item>
        <el-form-item label="工作状态：">
          <span>{{lookUserBasic.workStatus | filterWorkStatus}}</span>
        </el-form-item>
        <!--<el-form-item label="工作类型：">-->
        <!--<span>{{lookUserBasic.role | filterWorkType}}</span>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="在职企业：">-->
        <!--<span>{{lookUserBasic.mechanismName?lookUserBasic.mechanismName:'-'}}</span>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="归属人：">-->
        <!--<span>{{lookUserBasic.upNickName?lookUserBasic.upNickName:'-'}}</span>-->
        <!--</el-form-item>-->
        <el-form-item label="用户状态：">
          <span>{{lookUserBasic.userType == 0?'正常':'拉黑'}}</span>
        </el-form-item>
        <el-form-item label="实名状态：">
          <span>{{lookUserBasic.isReal | filterReal}}</span>
        </el-form-item>
        <el-form-item label="真实姓名：">
          <span>{{lookUserBasic.realName}}</span>
        </el-form-item>
        <el-form-item label="身份证号：">
          <span>{{lookUserBasic.userCardNumber}}</span>
        </el-form-item>
        <el-form-item label="积分：">
          <span>{{lookUserBasic.score}}</span>
        </el-form-item>
        <el-form-item label="周签到次数：">
          <span>{{lookUserBasic.signNumber}}</span>
        </el-form-item>
        <el-form-item label="可借金额：">
          <span>{{lookUserBasic.lendMoney}}</span>
        </el-form-item>
        <el-form-item label="是否隐藏：">
          <span>{{lookUserBasic.delStatus==0?'显示':'隐藏'}}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" style="width: 96px" @click="dialogLookVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!--编辑-->
    <el-dialog title="编辑信息" :visible.sync="dialogEditVisible" width="960px" class="basic-dialog" top="11vh">
      <el-form ref="form" :model="ruleForm" :rules="rules" label-width="100px" size="mini" @close="resetForm('form')">
        <el-form-item label="昵称：">
          <span>{{ruleForm.userName}}</span>
        </el-form-item>
        <el-form-item label="头像：">
          <img :src="ruleForm.userUrl?ruleForm.userUrl:require('../../../assets/common_images/avatar.png')"
               class="avatar-pic"/>
        </el-form-item>
        <el-form-item label="性别：">
          <span>{{ruleForm.userSex | filterSex}}</span>
        </el-form-item>
        <el-form-item label="电话号码：">
          <span>{{ruleForm.userTel}}</span>
        </el-form-item>
        <el-form-item label="用户角色：" prop="role">
          <el-radio-group v-model="ruleForm.role">
            <el-radio :label=0>普通员工</el-radio>
            <el-radio :label=1>直营店主</el-radio>
            <el-radio :label=2>加盟店主</el-radio>
            <el-radio :label=3>业务员</el-radio>
            <el-radio :label=4>总驻厂</el-radio>
            <el-radio :label=6>店员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="员工状态：" prop="workStatus">
          <el-radio-group v-model="ruleForm.workStatus">
            <el-radio :label=0>待业</el-radio>
            <el-radio :label=1>在职</el-radio>
            <el-radio :label=2>入职中</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--<el-form-item label="工作类型：" prop="workType">-->
        <!--<el-radio-group v-model="ruleForm.workType">-->
        <!--<el-radio :label=0>正式工</el-radio>-->
        <!--<el-radio :label=1>小时工</el-radio>-->
        <!--</el-radio-group>-->
        <!--</el-form-item>-->

        <!--<el-form-item label="在职企业：" style="margin-top: 16px">-->
        <!--<el-input v-model="ruleForm.mechanismName" style="width: 640px" placeholder="请选择在职企业" :disabled="true"-->
        <!--class="input-with-select" @click.native="openCompanyView">-->
        <!--<el-button slot="append" icon="el-icon-search"></el-button>-->
        <!--</el-input>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="归属人：" style="margin-top: 6px">-->
        <!--<el-input v-model="ruleForm.upNickName" style="width: 640px" placeholder="请选择归属人" :disabled="true"-->
        <!--class="input-with-select" @click.native="openBelongerView">-->
        <!--<el-button slot="append" icon="el-icon-search"></el-button>-->
        <!--</el-input>-->
        <!--</el-form-item>-->

        <el-form-item label="用户状态：" prop="userType">
          <el-radio-group v-model="ruleForm.userType">
            <el-radio :label=0>正常</el-radio>
            <el-radio :label=1>拉黑</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="实名状态：">
          <span>{{ruleForm.isReal | filterReal}}</span>
        </el-form-item>
        <el-form-item label="真实姓名：">
          <span>{{ruleForm.realName}}</span>
        </el-form-item>
        <el-form-item label="身份证号：">
          <span>{{ruleForm.userCardNumber}}</span>
        </el-form-item>
        <el-form-item label="积分：">
          <span>{{ruleForm.score}}</span>
        </el-form-item>
        <el-form-item label="周签到次数：">
          <span>{{ruleForm.signNumber}}</span>
        </el-form-item>
        <el-form-item label="可借金额：">
          <span>{{ruleForm.lendMoney}}</span>
        </el-form-item>
        <el-form-item label="是否隐藏：" prop="delStatus">
          <el-radio-group v-model="ruleForm.delStatus">
            <el-radio :label=0>显示</el-radio>
            <el-radio :label=1>隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="success" style="width: 96px" @click="saveUserBasic" :loading="sendLoad">保存
        </el-button>
        <el-button size="small" style="width: 96px" @click="resetForm('form')">取消</el-button>
      </div>
    </el-dialog>

    <!--在职企业-->
    <!--<company :companyView="companyView" @closeCompany="closeCompany" @selectCompany="selectCompany"></company>-->
    <!--归属人-->
    <!--<belonger :belongerView="belongerView" @closeBelonger="closeBelonger" @selectBelonger="selectBelonger"></belonger>-->

  </div>
</template>

<script>
  import Pagination from '@/components/Pagination';
  import {mapGetters} from 'vuex';
  import {permissionPoints} from '@/utils/permission';
  // import company from '@/components/common/company';
  // import belonger from '@/components/common/belonger';
  import {formatDate} from "@/utils/index";
  import {getBasicInfo, getInitUserBasicList, modifyBasicInfo} from "../../../api/user/user";

  export default {
    name: "userBasicInfo",
    computed: {
      ...mapGetters([
        'points'
      ])
    },
    data() {
      return {
        total: 0,
        listLoading: false,
        listQuery: {
          page: 1,
          limit: 20,
          id: '',
          userName: '',
          userTel: '',
          role: '',
          workStatus: '',
          orderBy: ''
        },
        paramFilters:[],
        lookUserBasic: {},
        keyWords: '',
        select: '1',
        companyView: false,
        belongerView: false,
        userBasicData: [],
        dialogLookVisible: false,
        dialogEditVisible: false,
        ruleForm: {
          userName: '',
          userUrl: '',
          userSex: '',
          userTel: '',
          role: '',
          workStatus: '',
          workType: 2,
          mechanismName: '',
          upUserName: '',
          userType: '',
          isReal: '',
          realName: '',
          userCardNumber: '',
          score: '',
          signNumber: '',
          lendMoney: '',
          delStatus: '',
          workAddress: '',
          upUserId: ''
        },
        rules: {
          workStatus: [
            {required: true, message: '请选择用户角色', trigger: 'change'}
          ],
          workType: [
            {required: true, message: '请选择工作状态', trigger: 'change'}
          ],
          userType: [
            {required: true, message: '请选择用户状态', trigger: 'change'}
          ],
          delStatus: [
            {required: true, message: '请选择是否隐藏', trigger: 'change'}
          ]
        },
        sendLoad: false
      }
    },
    created() {
      this.getUserBasicList();
    },
    methods: {
      searchUserBasic() {//搜索
        if (this.keyWords == '' || this.keyWords == undefined) {
          return this.$message.info({message: '请输入搜索内容', duration: 1000});
        }
        this.listQuery.id = '';
        this.listQuery.userName = '';
        this.listQuery.userTel = '';
        if (this.select == 1) {
          this.listQuery.id = this.keyWords;
        } else if (this.select == 2) {
          this.listQuery.userName = this.keyWords;
        } else {
          this.listQuery.userTel = this.keyWords;
        }
        this.listQuery.page = 1;
        this.getUserBasicList();
      },
      resetSearch() {
        this.select = '1';
        this.keyWords = '';
        this.listQuery.id = '';
        this.listQuery.userName = '';
        this.listQuery.userTel = '';
        this.listQuery.role = '';
        this.listQuery.workStatus = '';
        this.$refs.multipleTable.clearFilter();
        this.listQuery.page = 1;
        this.getUserBasicList();
      },
      getUserBasicList() {//获取用户基本信息列表
        this.listLoading = true;
        getInitUserBasicList(this.listQuery).then((res) => {
          this.listLoading = false;
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            const {items, totalRecord} = retObj.data;
            this.total = totalRecord;
            this.userBasicData = items;
          }
        }).catch(() => {
          this.listLoading = false;
        })
      },
      checkPermissionPoints(type) {
        let pointObj = this.points.userBasicInfo;
        return permissionPoints(type, pointObj);
      },
      handleLook(row) {//详细信息
        this.dialogLookVisible = true;
        getBasicInfo(row.id).then((res) => {
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            this.lookUserBasic = retObj.data;
          }
        })
      },
      filterChange(value) {//过滤
        let row = null;
        let val = null;
        // 拷贝filters的值
        for (const i in value) {
          row = i; // 保存 column-key的值，如果事先没有为column-key赋值，系统会自动生成一个唯一且恒定的名称
          val = value[i];
        }
        const filter = [{
          row: row,
          op: 'contains',
          value: val
        }];
        this.setFilter(filter)
      },
      setFilter(filters) {
        for (var i in filters) {
          var filter = null;
          for (var j in this.paramFilters) {
            // 如果filters[i]中存在于this.filter[]相同的值，那么把当前this.filter[i]的引用覆盖filter的引用.
            if (filters[i]['row'] === this.paramFilters[j]['row']) {
              filter = this.paramFilters[j];
            }
          }
          // 如果filter为空，即不存在相同的值，则将当前filter[i]添加到this.filter[]
          if (filter == null) {
            this.paramFilters.push({'row': filters[i].row, 'op': filters[i].op, 'value': filters[i].value});
          } else {
            // 如果filter不为空，即存在相同的值。则将filter[i] 赋值给filter，本质是更新this.filter[i]的值。
            filter.value = filters[i].value;
            filter.op = filters[i].op;
          }
        }

        this.paramFilters.forEach(obj => {
          if (obj.row == 'role') {
            this.listQuery.role = String(obj.value);
          }
          if (obj.row == 'workStatus') {
            this.listQuery.workStatus = String(obj.value);
          }
        });
        this.listQuery.page = 1;
        this.getUserBasicList();
      },
      sortChange(column) {//排序
        if (column.prop == "time" && column.order == "ascending") {
          this.listQuery.orderBy = 'time asc';
        } else if (column.prop == "time" && column.order == "descending") {
          this.listQuery.orderBy = "time desc";
        }
        this.listQuery.page = 1;
        this.getUserBasicList();
      },
      handleEdit(row) {//编辑
        this.dialogEditVisible = true;
        getBasicInfo(row.id).then((res) => {
          let retObj = res;
          if (retObj.code == 0 && retObj.data != null) {
            this.ruleForm = retObj.data;
            this.ruleForm.workType = this.ruleForm.workType * 1;
          }
        })
      },
      openCompanyView() {
        this.companyView = true;
      },
      closeCompany() {
        this.companyView = false;
      },
      selectCompany(company) {
        const {id, mechanismName} = company;
        this.ruleForm.workAddress = id;
        this.ruleForm.mechanismName = mechanismName;
        this.closeCompany();
      },
      openBelongerView() {
        this.belongerView = true;
      },
      closeBelonger() {
        this.belongerView = false;
      },
      selectBelonger(belonger) {
        const {id, userName} = belonger;
        this.ruleForm.upUserId = id;
        this.ruleForm.upUserName = userName;
        this.closeBelonger();
      },
      saveUserBasic() {//保存
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.sendLoad = true;
            let submitForm = {};
            submitForm.id = this.ruleForm.id;
            submitForm.role = this.ruleForm.role;
            submitForm.workStatus = this.ruleForm.workStatus;
            submitForm.workType = this.ruleForm.workType;
            submitForm.workAddress = this.ruleForm.workAddress;//在职企业id
            submitForm.upUserId = this.ruleForm.upUserId;//归属人id
            submitForm.userType = this.ruleForm.userType;
            submitForm.delStatus = this.ruleForm.delStatus;

            modifyBasicInfo(submitForm).then((res) => {
              let retObj = res;
              this.sendLoad = false;
              if (retObj.code == 0) {
                if (retObj.data == 1) {
                  this.dialogEditVisible = false;
                  this.$message.success({message: '修改用户信息成功', duration: 2000});
                  this.getUserBasicList();
                } else {
                  this.$message.error({message: '修改用户信息失败，请重试', duration: 2000});
                }
              }
            })
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.dialogEditVisible = false;
        this.$refs[formName].resetFields();
      }
    },
    filters: {
      filterRole(type) {
        switch (type) {
          case 0:
            return '普通员工';
          case 1:
            return '直营店主';
          case 2:
            return '加盟店主';
          case 3:
            return '业务员';
          case 4:
            return '总驻厂';
          case 5:
            return '店员';
        }
      },
      filterWorkStatus(type) {
        if (type == 0) {
          return '待业';
        } else if (type == 1) {
          return '在职';
        } else if (type == 2) {
          return '入职中';
        }
      },
      filterWorkType(type) {
        if (type == 0) {
          return '正式工';
        } else if (type == 1) {
          return '小时工';
        }
      },
      filterReal(type) {
        if (type != null && type > 0) {
          return '已实名';
        } else {
          return '未实名';
        }
      },
      filterSex(type) {
        if (type == 0) {
          return '未知';
        } else if (type == 1) {
          return '男';
        } else if (type == 2) {
          return '女';
        }
      },
      formatTime(time) {
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
      }
    },
    components: {
      Pagination,
      // company,
      // belonger
    }
  }
</script>

<style lang="scss" scoped>
  .user-basic-container {
    .basic-search {
      display: flex;
      align-items: center;
      width: 100%;
      height: 80px;
      .page-title {
        padding-left: 20px;
        font-size: 18px;
        font-weight: bold;
        min-width: 165px;
        text-align: left;
        color: rgba(61, 68, 77, 1);
      }
      .search-keyword {
        margin-left: 36px;
        margin-right: 24px;
        width: 470px;
        > > > .el-select .el-input {
          width: 110px;
        }
        > > > .el-input-group__prepend {
          background-color: #fff;
        }
      }
      .search-keyword-reset {
        margin-right: 36px;
      }
    }
    .basic-table {
      width: 98%;
      margin-left: 18px;
      > > > .el-table td, .el-table th {
        padding: 6px 0px;
      }
      > > > .el-table__header th {
        padding: 0;
        height: 30px;
        line-height: 30px;
      }
      > > > .el-table__column-filter-trigger {
        line-height: 28px;
        i {
          font-size: 18px;
        }
      }
      > > > .el-table__row .cell {
        display: flex;
        align-items: center;
      }
      > > > .el-table__header .has-gutter .cell {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      > > > .el-table__fixed-right {
        height: 100% !important;
      }
    }
    .basic-dialog > > > .el-dialog .el-dialog__header {
      display: flex;
      align-items: center;
      height: 48px;
      background: #F7F8FA;
      padding: 0px 0px 0px 12px;
      .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .basic-dialog > > > .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
      margin-bottom: 0px;
    }
    .basic-dialog {
      font-size: 14px;
      color: #606266;
      .avatar-pic {
        width: 72px;
        height: 72px;
        border-radius: 2px;
      }
      .input-with-select {
        > > > .el-input__inner {
          color: #333333;
        }
      }
    }
    .inner-dialog > > > .el-dialog .el-dialog__header {
      display: flex;
      align-items: center;
      height: 48px;
      background: #F7F8FA;
      padding: 0px 0px 0px 12px;
      position: fixed;
      width: 810px;
      z-index: 999;
      .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .inner-dialog {
      .company-key {
        margin-right: 12px;
        width: 470px;
        > > > .el-select .el-input {
          width: 110px;
        }
        > > > .el-input-group__prepend {
          background-color: #fff;
        }
      }
      > > > .el-table td, .el-table th {
        padding: 6px 0px;
      }
      > > > .el-table__header .has-gutter th {
        padding: 6px 0px;
      }
    }
    .inner-dialog > > > .el-dialog .el-dialog__body {
      margin-top: 30px;
    }
    > > > .el-button {
      line-height: 1.2;
    }
  }
</style>
